<template>
  <div class="richTextSet">
    <div class="deco-control-group">
      <div class="label">背景颜色</div>
      <div class="con"> 
        <span class="reset-color" @click="value.color='#fff'">重置</span>
        <el-color-picker
          v-model="value.color"
          color-format="hex"
          :predefine="defaultColor"
        />
       
      </div>
    </div>
    <div class="deco-control-group">
      <div class="label">是否全屏显示&nbsp;&nbsp;
        <span class="tag">{{value.fullScreen!=0?'全屏展示':'不全屏显示'}}</span>
      </div>
      <div class="con"> 
        <el-checkbox v-model="value.fullScreen"></el-checkbox>
      </div>
    </div>
    <div class="rich-box">
      <Tinymce :catchImages="catchImages" v-model="value.content" ref="editor" />
    </div>
  </div>
</template>

<script>
import Tinymce from './tinymce'

export default {
  props: ['value','defaultColor'],
  components: {
    Tinymce
  },
  data(){
    return{
      catchImages:[]
    }
  },
  created(){
  },
  mounted(){
  },
  methods:{
  }
}
</script>

<style lang='less'>
.richTextSet{
  .deco-control-group{
    padding: 12px 16px;
    &:after{
      content: ' ';
      display: block;
      clear: both;
    }
    .label{
      color: #969799;
      float: left;
      .tag{
        color: #313131;
      }
    }
    .con{
      float: right;
    }
    .reset-color{
      cursor: pointer;
      color: rgb(21, 91, 212);
    }
    .m-colorPicker {
      vertical-align: middle;
      margin-left: 5px;
      .colorBtn{
        width: 35px;
        height: 20px;
        border: 1px solid #ddd;
      }
      .box{
        z-index: 999;
        top: 25px;
        right: 0;
      }
    }
  }
}
</style>